const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: path.resolve(__dirname, "main.ts"), // 入口文件
  output: {
    // 出口文件
    path: path.resolve(__dirname, "../website-dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".vue", ".json"], // 解析文件顺序
  },
  module: {
    rules: [
      // 识别vue
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        // 识别tsx
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        // 识别图标
        test: /\.(svg|otf|ttf|woff|eot|gif|png)$/,
        loader: "url-loader",
      },
      {
        //识别样式
        test: /\.(scss|css)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    // 插件
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      // html插件
      template: path.resolve(__dirname, "template.html"),
    }),
  ],
};
